<template>
    <div>
        <header>
            <el-breadcrumb separator="/" style="padding: 10px 0px 30px;">
                <el-breadcrumb-item :to="{ path:'/leveltypelist',query: {id: first_id} }">{{lastTypeName}}</el-breadcrumb-item>
                <el-breadcrumb-item>当前位置</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="search">
                <el-form :inline="true" :model="searchData" class="demo-form-inline">
                    <el-form-item label="分类名称：">
                        <el-input placeholder="分类名称" v-model="searchData.searchName"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" icon="el-icon-search"  @click="search(1)" size="medium">查询</el-button>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add(1)" style="margin-bottom:20px;" size="medium">添加分类</el-button>
                </el-form>
            </div>
        </header>
        <div class="list">
            <div class="list-opate">
                <el-table :data="list.data" style="width: 100%" max-height="618">
                    <el-table-column prop="st_id" label="分类ID" align="center"></el-table-column>
                    <el-table-column prop="st_name" label="分类名称" align="center"></el-table-column>
                    <el-table-column prop="st_type_name" label="前台name名" align="center"></el-table-column>
                    <el-table-column prop="st_create_time" label="添加时间" align="center"></el-table-column>
                    <el-table-column prop="st_update_time" label="修改时间" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="look(scope.row)" type="text" size="small">查看种类</el-button>
                            <el-button @click="edit(1,scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="del(1,scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分类 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
            <!-- 种类 -->
            <el-dialog :visible.sync="dialogTableVisible" center>
                <p style="margin: 10px 0px 25px;">分类名称：{{st_name}}</p>
                <!-- 查询种类 -->
                <div class="search">
                    <el-form :inline="true" :model="searchzlData" class="demo-form-inline">
                        <el-form-item label="种类名称：">
                            <el-input placeholder="种类名称" v-model="searchzlData.searchName"></el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" icon="el-icon-search"  @click="search(2)" size="medium">查询</el-button>
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add(2)" style="margin-bottom:20px;" size="medium">添加种类</el-button>
                    </el-form>
                </div>
                
                <el-table :data="gridData.data">
                    <el-table-column prop="st_id" label="种类ID" align="center"></el-table-column>
                    <el-table-column prop="st_name" label="种类名称" align="center"></el-table-column>
                    <el-table-column prop="st_type_name" label="前台name名" align="center"></el-table-column>
                    <el-table-column prop="st_create_time" label="添加时间" align="center"></el-table-column>
                    <el-table-column prop="st_update_time" label="修改时间" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="edit(2,scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="del(2,scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 种类 分页 -->
                <el-pagination :current-page="typeCurrent" @current-change="handletypeCurrentChange" :total="gridData.total" style="margin-top:30px;"></el-pagination>
            </el-dialog>

        </div>
        <!-- 添加分类 -->
        <el-dialog :title="addtypeTit" :visible.sync="addtypeVisible" width="35%">
            <el-form :model="addtypeform" label-width="140px" :rules="addrules" ref="addtypeform">
                <el-form-item label="上级分类">
                    <el-input v-model="lastTypeName" placeholder="请输入上级分类" disabled v-if="typeSign === 1"></el-input>
                    <el-input v-model="st_name" placeholder="请输入上级分类" disabled v-if="typeSign === 2"></el-input>
                </el-form-item>
                <el-form-item :label="typeSign === 1? '分类名称':'种类名称'">
                    <el-input v-model="addtypeform.st_name" :placeholder="typeSign === 1? '请输入分类名称':'请输入种类名称'"></el-input>
                </el-form-item>
                <el-form-item label="前台name名">
                    <el-input v-model="addtypeform.st_type_name" placeholder="请输入前台name名"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="canceladd('addtypeform')">取 消</el-button>
                <el-button type="primary" @click="typeFun('addtypeform')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script src='../../contral/last_leveltypelist.js'></script>
